import Taro from '@tarojs/taro'
import { useState, useRef, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { View, Image } from '@tarojs/components'
import WowLogin from '../../components/WowLogin'
import WowJumpBtn from '../../components/WowJumpBtn'
import WowSignInModal from '../../components/WowSiginInModal'

import './index.less'

const My = () => {

  const { token, userInfo } = useSelector(state => state.user)

  const [showModal, setShowModal] = useState(false)
  const [signInInfo, setSignInInfo] = useState({})
  const [showRoleList, setShowRoleList] = useState([])
  const isFirstRender = useRef(true)

  const signIn = async () => {
    const res = await Taro.$http.post('/api/gy/sign')
    setSignInInfo(res)
  }

  const goBaseInfo = () => {
    Taro.navigateTo({
      url: '/task/base-info/index'
    })
  }

  const getRoleList = async () => {
    const { data: res } = await Taro.$http.post('/api/gy/getGameUsers')
    if (res.code !== 0) return Taro.$showMsg()
    const arr = res.data.filter((e, i) => i < 3).map(e => {
      const [name, serverName] = e.name.split('-')
      return {
        name,
        serverName
      }
    })
    if (arr.length < 3) {
      for (let i = 0, len = 3 - arr.length; i < len; i++) {
        arr.push({
          isEmpty: true
        })
      }
    }
    setShowRoleList(arr)
  }

  useEffect(() => {
    getRoleList()
  }, [])

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false
    } else {
      setShowModal(true)
    }
  }, [signInInfo])

  return (
    <View>
      <View className='header'>
        <View className='header-bg' />
        <View className='avatar'>
          <Image className='avatar-img' src={token ? userInfo.avatarUrl : require('../../static/images/user-avatar.png')} />
        </View>
        <View className='mid-box'>
          {
            token ?
              (
                <View className='info-box'>
                  <View className='info-top'>
                    <View className='nickname'>{userInfo.nickName}</View>
                    <View className='group'>1群</View>
                  </View>
                  <View className='user-num'>编号: 0987654321</View>
                  <View className='exp-bar'>
                    <View style={{ width: '80%' }} className='process'></View>
                    <View className='num'>666</View>
                  </View>
                </View>
              ) :
              (
                <WowLogin />
              )
          }
        </View>
        <View className='sign-in' onClick={signIn}>签到</View>
      </View>
      {/* panel */}
      <View className='panel-list'>
        <View className='panel-item'>
          <View className='panel-item-title'>我的互助</View>
          <View className='panel-item-content'>
            <View className='left'>
              <View className='num'>1890</View>
              <View className='name'>带新次数</View>
            </View>
            <View className='right'>
              <View className='num'>8</View>
              <View className='name'>被带次数</View>
            </View>
          </View>
        </View>
        <View className='panel-item'>
          <View className='panel-item-title'>我的益豆</View>
          <View className='panel-item-content'>
            <View className='left'>
              <View className='num'>1890</View>
              <View className='name'>带新次数</View>
            </View>
            <View className='right'>
              <View className='num'>8</View>
              <View className='name'>被带次数</View>
            </View>
          </View>
        </View>
        <View className='panel-item'>
          <View className='panel-item-title'>我的角色</View>
          <View className='panel-item-content'>
            {
              showRoleList.map((e, i) => (
                <View className='panel-item-role' key={i}>
                  <Image className='role-img' src={require('../../static/images/warrior.png')} />
                  <View className='role-text'>{e.isEmpty ? '暂无角色' : e.name}</View>
                  <View className='role-text'>{e.isEmpty ? '' : e.serverName}</View>
                </View>
              ))
            }
            <View className='panel-item-role'>
              <Image className='role-img' src={require('../../static/images/add.png')} />
              <View className='role-text'>添加角色</View>
              <View className='role-text'>&nbsp;</View>
            </View>
          </View>
        </View>
      </View>
      <View className='jump-list'>
        <WowJumpBtn name='使用指南' />
        <WowJumpBtn onClick={goBaseInfo} name='个人信息完善' />
        <WowJumpBtn name='帮助反馈' />
      </View>
      <WowSignInModal info={signInInfo} show={showModal} close={() => setShowModal(false)} />
    </View>
  )
}

export default My